<template>
  <div>
    <template v-if="response">
      <el-result
        :icon="isPaid ? 'success' : 'error'"
        :title="isPaid ? '捐赠成功' : '捐赠失败'"
        :sub-title="isPaid ? '感谢大哥的捐赠' : '只要你手动跳转到这里才有可能看到这句话'">
        <template #extra>
          <el-button @click="$router.push({name: 'index'})" type="primary">返回首页</el-button>
        </template>
      </el-result>
    </template>
  </div>
</template>

<script>
import request from '@/http/request'
import loading from '@/utils/loading'

let waiting = loading.start()
export default {
  name: 'Return',
  data() {
    return {
      isPaid: false,
      response: false,
    }
  },
  methods: {
    checkTradeStatus() {
      let outTradeNo = this.$route.query.out_trade_no
      if (outTradeNo === undefined) {
        return
      }
      request.getTradeStatus(outTradeNo).then(() => {
        this.isPaid = true
        this.response = true
      }).catch(() => {
        this.response = true
      })
    },
  },

  watch: {
    response() {
      waiting.close()
    },
  },

  mounted() {
    this.checkTradeStatus()
  },
}
</script>

<style scoped>

</style>